<template>
<el-container>
  <el-aside :width="isCollapseFlag ? '61px' : '230px'" :class="isCollapseFlag? '':'pd-5'" class="bg-58 boxS-i-4">
    <slot>
     <Aside  :menuList="HomeList"  :Homeitem="Homeitem" :isCollapse="isCollapseFlag" @getCollapseFlag="getCollapseFlag" :AsideType="AsideType" :menuchecked="menuchecked"  @onSelectArr="onSelectArr" :isChecked="isChecked"/>
    </slot>
  </el-aside>
  <el-main>
    <div class="flex-1 ">
      <div class="mgb-10 flex">
        <div class="font-20 fontW-7 theme-color border-1 border-r text-c h-40 mgr-20" style="width:10%" @click="clickRemove">{{$t('btn.remove')}}</div>
        <div v-for="item in selectArr" :key="item.authName" class="font-20 fontW-7 theme-color border-1 border-r mgr-20 flex-s-around" style="width:10%">
          <!-- <div v-if="item.checked">
          </div> -->
            <div v-if="item.cid">{{$t('sideba.'+ item.authName)}} </div>
            <div v-else>{{item.authName}} </div>
            <img src="../../assets/icon/close.svg" alt="" @click="clickClose(item)">
          <!-- {{$t('sideba.'+ item.authName)}} -->
        </div>
      </div>
      <div style="height:100%">
        <home-table :homeData="homeData"/>
      </div>
    </div>
  </el-main>
</el-container>

</template>
<script>
import HomeTable from '../../components/component/HomeTable'
import HomeMenu from '../../components/component/HomeMenu'
import Aside from '../../components/component/Aside'
import {homeData, HomeList} from '../../mock/data'
const Homeitem = [
  {id: 2,
    authName: 'collection',
    img_url: require('../../assets/icon/collection.svg'),
    children: [
      {id: 0, authName: 'abdibboy', img_url: require('../../assets/img/tx1.svg')},
      {id: 1, authName: 'diitiffy', img_url: require('../../assets/img/tx1.svg')},
      {id: 2, authName: 'ybaibgnw', img_url: require('../../assets/img/tx1.svg'), crown_url: require('../../assets/icon/crown.svg')}
    ]
  }
]
export default {
  components: {
    HomeTable,
    HomeMenu,
    Aside
  },
  data () {
    return {
      HomeList: HomeList,
      Homeitem: Homeitem,
      HomeData: homeData,
      homeData: [],
      isCollapseFlag: false,
      isChecked: false,
      selectArr: [],
      menuchecked: null,
      AsideType: 1,
      slectIndex: Number
    }
  },
  created () {
    this.homeData = this.HomeData
  },
  watch: {
    isCollapseFlag (newVal, oldval) {
      if (newVal === false) {
        if (this.rowType === '4') {
          this.widthNum = 18
        } else {
          this.widthNum = 12
        }
        this.marginNum = 1
      } else {
        this.marginNum = 0.5
        if (this.rowType === '4') {
          this.widthNum = 12.5
        } else {
          this.widthNum = 10
        }
      }
    }
  },
  methods: {
    getCollapseFlag: function (val) {
      this.isCollapseFlag = val
    },
    onSelectArr: function (val) {
      let _this = this
      val.selectItem.chooseIndex = val.chooseIndex
      if (val.selectItem.checked) {
        if (_this.selectArr.indexOf(val.selectItem.authName) < 0) {
          _this.selectArr.push(val.selectItem)
        }
      } else {
        _this.selectArr.forEach((item, index) => {
          if (item.authName === val.selectItem.authName) {
            console.log(index, 'index')
            // _this.selectArr = _this.selectArr.splice(index, 1)
            // item.checked = !item.checked
            _this.selectArr.splice(index, 1)
          }
        })
        // _this.$forceUpdate()
      }
      // _this.selectArr = [..._this.selectArr]
      _this.homeData = _this.HomeData.slice(val.Index, (val.Index + 1) * 4)
    },
    clickClose: function (selectVal) {
      let _this = this
      _this.HomeList[selectVal.chooseIndex].children.forEach((item, index) => {
        if (item.authName.trim() === selectVal.authName.trim()) {
          item.checked = !item.checked
          _this.$set(_this.HomeList[selectVal.chooseIndex].children, index, item)
          _this.selectArr.forEach((item, index) => {
            if (item.authName === selectVal.authName) {
              _this.selectArr.splice(index, 1)
            }
          })
        }
      })
      _this.$forceUpdate()
    },
    clickRemove: function () {
      this.selectArr = []
      let _this = this
      for (let i = 0; i < HomeList.length; i++) {
        _this.HomeList[i].children.forEach((item, index) => {
          if (item.checked) {
            item.checked = false
          }
        })
      }
    }
  }
}
</script>
<style lang="less"  scoped>
.homefunbox {
  width: 100%;
  height: auto;
  overflow: hidden;
  .homeCent{
    margin:20px 20px 0 0;
  }
}
</style>
